<template>
  <cu-layout :navProp="{ placeholder: true }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-schedule-container`]">
      <view
        class="step-item"
        v-for="(item, index) in progress"
        :key="index"
        :class="[{ default: state > index }, { start: state == 0 && index == 0 }, { second: state == 1 && index == 1 }, { third: state == 2 && index == 2 }, { end: state >= 3 }]"
      >
        <view class="step-name">{{ item.status }}</view>
        <view class="step-value">
          <view class="value-item" v-for="(items, index) in item.list" :key="index">
            <view>{{ items.date }}</view>
            <view class="value">{{ items.detail }}</view>
          </view>
        </view>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'componentName',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      state: 0,
      id: '',
      progress: [],
      stepStateEnum: {
        待受理: 0,
        已受理: 1,
        处理中: 2,
        已完成: 3,
        已评价: 4,
        已拒绝: 5,
        不受理: 6,
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {},
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('schedule-container')} {
  padding: 0 28rpx;
  .step-item {
    padding: 15rpx 15rpx 15rpx 40rpx;
    position: relative;
    display: flex;
    &::before {
      position: absolute;
      content: ' ';
      left: 0;
      top: 25rpx;
      background: #999999;
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
    }
    .step-name {
      width: 20%;
      font-size: 28rpx;
      color: #999999;
    }

    .step-value {
      width: 80%;
      font-size: 24rpx;
      .value-item {
        .value {
          margin-top: 15rpx;
        }
      }
    }
  }
  .default {
    &::before {
      background: #212121;
    }
    .step-name {
      color: #212121;
    }
  }
  .start {
    &::before {
      background: #f8d34b;
    }

    .step-name {
      color: #f8d34b;
    }
  }
  .second {
    &::before {
      background: #ed7b4d;
    }

    .step-name {
      color: #ed7b4d;
    }
  }
  .third {
    &::before {
      background: #5daaf8;
    }
    .step-name {
      color: #5daaf8;
    }
  }
  .end {
    &::before {
      background: #212121;
    }
    .step-name {
      color: #212121;
    }
  }
  .step-class {
    &::before {
      position: absolute;
      content: ' ';
      left: 0;
      top: 25rpx;
      // background: #f8d34b;
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
    }
    .step-name {
      width: 20%;
      font-size: 28rpx;
      // color: #f8d34b;
    }
  }
}
</style>
